import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TextStyle,
} from 'react-native';
import { useState } from 'react';
import { Button, Toggle } from '@ui-kitten/components';
import { useNavigation, useRoute } from '@react-navigation/native';
import BackButton from '../../navigation/BackButton';
import { RootStackNavigationProp, RootStackRouteProp } from '../../types';
import { courseList } from '../../constants/DataList';

export default function CourseInfoScreen() {
  const [recordSelf, setRecordSelf] = useState(false);
  const navigation = useNavigation<RootStackNavigationProp<'CourseInfo'>>();
  const route = useRoute<RootStackRouteProp<'CourseInfo'>>();

  const { courseId } = route.params;

  const startCourse = () => {
    navigation.navigate('VideoCourse', { courseId, recordSelf });
  };
  const course = courseList.find(it => it.id === courseId);

  if (!course) {
    return <View />;
  }

  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <BackButton title={course.title} />
        <ScrollView>
          <View style={styles.courseCover}>
            <Image
              style={styles.courseCoverImage}
              resizeMode="cover"
              source={{
                uri: course.cover,
              }}
            />
            <View style={styles.courseInfo}>
              <Text style={styles.courseHeat}>{course.consumption}千卡</Text>
              <Text style={styles.courseLength}>
                {course.durationMinutes}分钟
              </Text>
              <Text style={styles.courseUsed}>{course.used}人练过</Text>
            </View>
          </View>
          <Button style={styles.startCourse} onPress={startCourse}>
            进入课程
          </Button>
          <View style={styles.recordVideo}>
            <Text style={styles.recordVideoLabel}>视频课堂</Text>
            <Toggle
              status={recordSelf ? 'success' : 'basic'}
              checked={recordSelf}
              onChange={setRecordSelf}
            />
          </View>
          <Text style={styles.recordVideoTip}>
            打开此选项，录制实时跟踪视频
          </Text>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

const courseInfoTextStyle: TextStyle = {
  color: '#ffffff',
  fontSize: 16,
  fontWeight: 'bold',
  textShadowColor: '#777777',
  textShadowOffset: { width: 1, height: 1 },
  textShadowRadius: 2,
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  container: {
    flex: 1,
  },
  courseCover: {
    height: 230,
    marginBottom: 24,
  },
  courseCoverImage: {
    flex: 1,
  },
  courseInfo: {
    position: 'absolute',
    bottom: 12,
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    paddingHorizontal: 12,
  },
  courseHeat: {
    ...courseInfoTextStyle,
  },
  courseLength: {
    ...courseInfoTextStyle,
  },
  courseUsed: {
    ...courseInfoTextStyle,
  },
  startCourse: {
    marginHorizontal: 48,
    borderRadius: 60,
    backgroundColor: '#5b308b',
    borderColor: 'transparent',
    marginBottom: 24,
  },
  recordVideo: {
    marginHorizontal: 60,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  recordVideoLabel: {
    fontSize: 16,
  },
  recordVideoTip: {
    marginHorizontal: 60,
    color: '#999',
    fontSize: 12,
  },
});
